<template>
    <div class="header">
        <div class="box">
                <img src="./tupian/tupian.jpg">
                <span class="sz">通知</span>
        </div>
    </div>
    <div class="one-box">
        <div class="tap">
            <a class="tap-item tap-item-on" onclick="tabChange(0)">系统通知</a>
            <a class="tap-item " onclick="tabChange(1)">收件箱</a>
        </div> 
    </div>
    <div class="box1">
        <ul>
            <li class="war">
                <a href="mo">
                    <div class="weq">
                    <div class="pro"><img src="./tupian/t0193ec66af31dc0782.webp" alt=""></div>
                    <div class="orp"><span>王一博评论了你的照片</span><p>15分钟前</p><p>太棒了！我很喜欢</p></div>
                    </div>
                </a>
            </li>
            <li class="war">
                <a href="mo">
                    <div class="weq">
                    <div class="pro"><img src="./tupian/cat2.webp" alt=""></div>
                    <div class="orp"><span>沈雯慧赞了你对照片的评价</span><p>1小时前</p><p></p></div>
                    </div>
                </a>
            </li>
            <li class="war">
                <a href="mo">
                   <div class="weq">
                    <div class="pro"><img src="./tupian/dog4.webp" alt=""></div>
                    <div class="orp">
                        <span>桐桐赞了你的照片</span><p>1小时前</p><p></p></div>
                   </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import { CENTERED_ALIGNMENT } from 'element-plus/es/components/virtual-list/src/defaults';
export default {
    name: "notice",
}
</script>

<style land="less" scoped>
*{
    padding: 0px;
    margin: 0px;
}
.header{
    display: flex;
    align-items: center; 
    justify-content: space-between;
    height: 50px;
    background-color: rgb(255, 255, 255);
    color: rgb(20, 20, 20);
}
.box{
    display: flex;
    align-items: center;
}
.sz{
    margin-left: 130px;
}
.h1{
    display: flex;
    align-items: center;
    font: normal 28px Cookie, Arial ,Helvetica, sans-serif;
    padding: 0px 20px;
}
img{
    width: 50px;
    height: 50px;
}
.one-box{
    width: 100%;
    height: 100%;
    position: relative;
}
.tap{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 0;
    font-size: 1rem;
    background-color: #fff;
    padding: 0 4%;
    box-sizing: border-box;
}
.tap-item{
    width: 100%;
    display: block;
    color:#2e272b6b;
    font-size: 1rem;
    padding: .8rem 0;
    text-align: center;
    transition: .3s;
}
.tap-item-on{
    font-size: 1.1rem;
    color: #e548a3;
    position: relative;
}
.tap-item-on:after{
    content: '';
    width: 80%;
    height: 4px;
    background-color: #e978a5;
    position: absolute;
    bottom: 0;
    left:10%;
}
.box1{
   height: 50px;
}
.pro{
    margin-top: 60px;
}
.weq{
    display: flex;
}
.orp{
    margin-top: 58px;
    margin-left: 10px;
}
</style>